<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <nav>
    <RouterLink to="/" class="nav-link">Home</RouterLink>
    <RouterLink to="/chat" class="nav-link">Chat</RouterLink>
    <RouterLink to="/about" class="nav-link">About</RouterLink>
  </nav>
  <RouterView />
</template>

<style scoped>
nav {
  padding: 20px;
  text-align: center;
}

.nav-link {
  margin: 0 10px;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
}

.nav-link:hover {
  background-color: #f0f0f0;
}

.nav-link.router-link-exact-active {
  background-color: #42b883;
  color: white;
}
</style>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
